<template>
  <div class="app-container">
    <el-form :model="form" ref="form" label-width="120px" :rules="rules" class="demo-ruleForm">
      <el-form-item label="任务标题" prop="title">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="数据库服务地址" prop="databaseUrl">
        <el-input v-model="form.databaseUrl"></el-input>
      </el-form-item>
      <el-form-item label="数据库服务端口" prop="databasePort">
        <el-input v-model="form.databasePort"></el-input>
      </el-form-item>

      <el-form-item label="连接账号" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="连接密码" prop="password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item label="运行计划" prop="cron">
        <el-input v-model="form.cron" @click.native="openCronDialog" readonly></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="saveOrUpdate">保存</el-button>
        <router-link to="/inner/databasetask/list">
          <el-button>取消</el-button>
        </router-link>
      </el-form-item>
    </el-form>

    <el-dialog v-el-drag-dialog class="cron_exp_dialog" title="定义任务运行计划" :visible.sync="dialogCronExpVisible" append-to-body>
      <cron-time @getCronExp="handleCronExp" :cron_express="form.cron" :operate_type="operateType"></cron-time>
    </el-dialog>
  </div>
</template>

<script>
import { saveOrUpdateApp, appDetail } from '@/api/api'
import elDragDialog from '@/directive/el-dragDialog'

import cronTime from '@/components/custom/cronTime'
export default {
  components : {cronTime},
  directives: {elDragDialog},
  data() {
    return {
      form : {
        id : ""
      },
      rules: {
        name: [
          { required: true, message: '请输入应用名称', trigger: 'blur' },
          { min: 2, max: 100, message: '长度在 2 到 100 个字符', trigger: 'blur' }
        ],
        version: [
          {required : true, message : "请输入版本号", trigger: "blur"}
        ],
        code : [
          {required : true, message : "请输入应用编码", trigger: "blur"},
          { min: 4, max: 32, message: '长度在 4 到 32 个字符', trigger: 'blur' },
          {pattern: "^[0-9a-zA-Z]+$", message: '只能是数字和字母', trigger: 'blur'},
        ]
      },

      dialogCronExpVisible : false,
      operateType : 'add'
    }
  },

  methods: {
    openCronDialog() {
      this.dialogCronExpVisible = true;
      this.operateType = this.form.cron && this.form.cron.trim !== '' ? "edit" : "add";
    },
    handleCronExp (exp) {
      this.form.cron = exp
      this.dialogCronExpVisible = false
    },
    //获取应用详情
    fetchData() {
      if (!this.form.id) {
        return;
      }
      appDetail(this.form.id).then((res) => {
        if (res.code === 200) {
          this.form = res.result;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    saveOrUpdate() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          saveOrUpdateApp(this.form).then((res) => {
            if (res.code === 200) {
              this.$message.success("操作成功！");
              this.$router.push({path : "/inner/databasetask/list"});
            } else {
              this.$message.error(res.message);
            }
          });
        } else {
          this.$message.warning("还存在填写不合法的地方，请确认！");
          return false;
        }
      });
    }
  },
  mounted() {
    this.form.id = this.$route.query.id;
    if (this.form.id) {
      this.fetchData();
    }
  },
}
</script>
